<template>
	<view class="contont_box pt30 plr30">
		<view class="mb30 ptb30 bsb bf border-r1 shadow" style="min-height: 100upx;display: flex;align-items: center;">
			<view class="ml30" style="width: 150rpx;">电池型号：</view>
			<view style="width: 500rpx;">
				<u-radio-group v-model="buyValue">
					<u-radio @change="buyRadioChange(item)" v-for="(item, index) in buyList" :key="index"
						:name="item.btTypeId">
						{{item.btType}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="mb30 ptb30 bsb bf border-r1 shadow" style="min-height: 300upx;">
			<view class="ml30">
				押金服务
			</view>·
			<view class="mt20 ml30 mr30 selete_cont">
				<!-- 芝麻信用免押 -->
				<!-- 	<view class="box_sel zmxy" :class="{selActive:selIndex === 0}" @click="selIndex = 0">
					<view class="zmxy_t">
						<image src="../../../static/zmxy_icon.png" mode="widthFix" style="width: 35rpx;height: 50rpx;">
						</image>
						<text class="ml10">芝麻信用免押金</text>
					</view>
					<view class="num">
						芝麻分≥550
					</view>
					<view class="price">
						￥0
						<text class="crossed">￥{{money}}</text>
					</view>
				</view> -->
				<!-- 支付押金 -->
				<view class="box_sel yj" :class="{selActive:selIndex === 1}" @click="selIndex = 1">
					<view class="zmxy_t">
						<image src="../../../static/yj_icon.png" mode="widthFix" style="width: 35rpx;height: 50rpx;">
						</image>
						<text class="ml10">支付押金</text>
					</view>
					<view class="num">
						退租后、才可退押金
					</view>
					<view class="price">
						￥{{money}}
					</view>
				</view>
			</view>
			<!--  <view class="text_show">
        本套餐取电起租后，不支持退租金!
      </view> -->
		</view>

		<u-button type="primary" @click="payment">{{selIndex === 0 ? '开启信用免押金' : '立即支付'}}</u-button>
		<view class="mb30 mt30 ptb30 bsb bf border-r1 shadow">
			<view class="ml30">
				押金支付须知
			</view>
			<view class="cont_show p30">
				1.缴纳押金或信用免押后，方可购买套餐或领取电池<br>
				2.押金可在归还电池后随时退还<br>
				3.[信用免押金] 功能由芝麻信用提供技术支持，针对符合条件的用户免除押金缴纳义务<br>
				4.成功开启[信用免押金] 功能的用户，平台不会扣附任何费用。按时归还电池后，可随时取消授权，不影响芝麻信用分。<br>
				5.套餐到期后请及时归还电池，否则平台有权依照协议实施押金扣除，完成电池归还后押金可退还。
			</view>
		</view>
		<u-popup v-model="show" mode="left" :closeable="true" close-icon-pos="top-right">
			<view style="padding: 60rpx;" v-html="content"></view>
			<view class="flex_aj h60 mb40" style="padding: 0 30rpx;">
				<view class="flex_a" @click="checkboxChange2">
					<view class="checkbox_item flex_aj" :class="isAgreeDianChi ? 'checkbox_acti' : ''">
						<u-icon name="checkbox-mark" color="#fff" size="24"></u-icon>
					</view>
					<text class="pl10">我已阅读并同意</text>
				</view>
				<view class="primary">《押金协议》</view>
			</view>
			<view class="plr30 mb30 pb60">
				<u-button type="primary" shape="circle"
					@click="confBuy">{{selIndex === 0 ? '开启信用免押金' : '交付押金'}}</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import payDeposit from '../mixins/payDeposit.js'
	import {
		depositList,
		settingExchange,
		zfbZhimaCredit,
		zfbZhimaCancel
	} from '@/api/user.js'
	export default {
		mixins: [payDeposit],
		data() {
			return {
				buyValue: '',
				buyList: [],
				selIndex: 1, //0是信用免押  ，1是支付押金
				show: false,
				content: '',
				isAgreeDianChi: false,
				query: {},
				money: 0.00
			}
		},
		onLoad(o) {
			this.query = o
			this.getBatteryTypeList()
			this.settingExchange()
		},
		methods: {
			payment() {
				if (this.selIndex === 1) {
					if (!this.buyValue) {
						this.toast('请选择你要交付押金的电池类型')
						return
					}
					this.show = true
				} else {
					this.show = true

				}
			},
			async confBuy() {
				if (!this.isAgreeDianChi) {
					return this.toast('请勾选并同意《押金协议》')
				}
				if (this.selIndex === 1) {
					console.log('支付押金')
					this.confDeposit2(uni.getStorageSync('agentId'), this.buyValue, this.query.deviceId, this.query
						.deviceNo)
				} else {
					console.log('信用免押')
					const res = await zfbZhimaCredit({
						agentId: uni.getStorageSync('agentId'),
						btTypeId: this.buyValue,
					})
					if (res.code === 200) {
						console.log(res.data)
						my.tradePay({
							orderStr: res.data.orderStr, // 完整的支付参数拼接成的字符串，从服务端获取
							success: (r) => {
								console.log(r, '信用回调')
								if (r.resultCode === '9000') {
									this.toast('即将跳转电池套餐页面...')
									setTimeout(() => {
										uni.redirectTo({
											url: `/pages/user/rentEle/package?type=2&deviceId=${this.query.deviceId}&deviceNo=${this.query.deviceNo}`
										});
									}, 2000)
								}

							},
							complete: (r) => {
								zfbZhimaCancel({
									orderNo: res.data.orderNo
								})
							}
						});
					}

				}

				this.show = false
			},
			// 选中某个单选框时，由radio时触发
			buyRadioChange(e, v) {
				this.buyValue = e.btTypeId
				this.money = e.money
			},
			checkboxChange2() {
				this.isAgreeDianChi = !this.isAgreeDianChi
			},
			async settingExchange() {
				// 1. 租赁电池须知   2.租赁电池套餐协议
				const res = await settingExchange({
					queryType: 2
				})
				this.content = res.msg || '租赁电池协议内容待更新！'
			},
			async getBatteryTypeList() {
				let res = await depositList({
					agentId: uni.getStorageSync('agentId')
				})
				if (res.code === 200) {
					this.buyList = res.data
					this.money = this.buyList[0].money
					this.buyValue = this.buyList[0].btTypeId
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selete_cont {
		display: flex;
		justify-content: space-between;
	}

	.box_sel {
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		padding: 20rpx;
		width: 300rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		.zmxy_t {
			display: flex;
			align-items: center;
		}

		.num {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}

		.price {
			color: red;
			font-size: 30rpx;
			margin-top: 10rpx;

			.crossed {
				text-decoration: line-through;
				color: #999;
				font-size: 20rpx;
				margin-left: 10rpx;
			}
		}
	}

	.selActive {
		border: 2rpx solid #035ffe;
	}

	.text_show {
		text-align: center;
		margin-top: 20rpx;
		color: red;
	}

	.cont_show {
		font-size: 24rpx;
		line-height: 35rpx;
	}

	.checkbox_acti {
		background-color: $primary;
		border: 1px solid $primary;
	}

	.checkbox_item {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		border: 1px solid #ccc;
		box-sizing: border-box;
	}
</style>